<template>
	<view class="m-tab" :style="viewStyle">
		<template v-for="(item,index) in list">
			<view class="tab-item" :class=" {'active': value==index}" @click="handleChange(index)">
				<text :style="textStyle">{{item}}</text>
			</view>
		</template>
	</view>
</template>
<script>
	import { array, object } from '@/libs/fn/verify.js'
	export default {
		name: "itab",
		props: {
			align: {
				type: String,
				default: 'grid',
			},
			justify: {
				type: String,
				default: '',
			},
			small: {
				type: Boolean,
				default: false,
			},
			list: {
				type: [Array, Object],
				required: true,
			},
			value: {
				type: [Number, String],
				default: 0
			},
			gap: {
				default: '0 0 12',
				type: String,
			},
			spa: {
				default: '0',
				type: String,
			},
			color: {
				type: String,
				default: '',
			},
			size: {
				type: String,
				default: '30',
			},
		},
		data() {
			return {

			};
		},
		computed: {

			viewStyle() {
				const style = {
					'display': this.align
				};
				if (this.align == 'grid') {
					let a = '1fr ';
					let length = 0;
					//数组形式时
					if (array(this.list)) {
						length = this.list.length;
					} else {
						length = Object.keys(this.list).length;
					}
					a = '1fr '.repeat(length);
					style["grid-template-columns"] = a
				}
				if (this.justify) {
					style['justify-content'] = this.justify;
					style['overflow-x'] = 'scroll'
				}
				return style
			},
			textStyle() {
				const gap = this.gap.split(" ").filter(x => x);
				const spa = this.spa.split(" ").filter(x => x);
				return {
					color: this.color,
					fontSize: this.ftsize + 'rpx',
					padding: gap.map(n => `${n}rpx`).join(' '),
					margin: spa.map(n => `${n}rpx`).join(' '),
				}
			},
		},
		methods: {
			handleChange(index) {
				this.$emit('input', index);
				this.$emit('onChange', index)
			}
		}
	}
</script>
<style lang="scss">
	.m-tab {
		.tab-item {
			text {
				display: inline-block;
				font-size: 30rpx;
				font-weight: 400;
				color: var(--text_1);
				position: relative;

				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 50%;
					bottom: 0;
					width: 0%;
					height: 4rpx;
					border-radius: 5rpx;
					border-radius: 1rpx;
					transition: all .3s;
					transform: translateX(-50%);
				}
			}
		}

		// .tab-item+.tab-item {
		// 	margin-left: 42rpx;
		// }

		.active {
			text {
				font-weight: bold;
				color: var(--text_thenme);
				&::after {
					width: 100%;
					background: var(--text_thenme);
				}
			}
		}

	}
</style>